<script setup lang="ts">
import { ref, watch } from 'vue'
import orderListItem from '@/pagesOther/pages/qiangdan/components/order-list-item.vue'
import { usePupupStore } from '@/stores'

//页面传参
const query = withDefaults(
  defineProps<{
    status?: string
  }>(),
  {
    status: '',
  },
)

usePupupStore().showCancelPopup = false

const tabs = ref()
const tabList = ref([
  {
    name: '全部',
    value: '',
    disabled: false,
  },
  /*
  {
    name: '待接单',
    value: '1',
    disabled: false,
  },*/
  {
    name: '进行中',
    value: '2',
    disabled: false,
  },
  {
    name: '已完成',
    value: '3',
    disabled: false,
  },
  {
    name: '待确认',
    value: '4',
    disabled: false,
  },
])

// 当前tab下标
const sub = tabList.value.findIndex((item) => item.value == query.status)
const current = ref(sub == -1 ? 0 : sub)
// tabs通知swiper切换
const tabsChange = (index: number) => {
  current.value = index
}

// swiper滑动中
const swiperTransition = (e: UniHelper.SwiperOnTransitionEvent) => {
  if (!current.value) {
    tabs.value.setDx(e.detail.dx)
  }
}

// swiper滑动结束
const swiperAnimationfinish = (e: UniHelper.SwiperOnAnimationfinishEvent) => {
  current.value = e.detail.current
  if (current.value) {
    tabs.value.unlockDx()
  }
}

watch(
  () => usePupupStore().showCancelPopup,
  (newVal) => {
    tabList.value.forEach((item) => (item.disabled = newVal))
  },
  { immediate: true },
)
</script>

<template>
  <z-paging-swiper>
    <template #top>
      <z-tabs
        ref="tabs"
        :list="tabList"
        :current="current"
        @change="tabsChange"
        bg-color="#f6f6f6"
      />
    </template>
    <swiper
      class="swiper"
      :current="current"
      @transition="swiperTransition"
      @animationfinish="swiperAnimationfinish"
    >
      <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
        <order-list-item
          :tabIndex="index"
          :currentIndex="current"
          :status="tabList[current].value"
        ></order-list-item>
      </swiper-item>
    </swiper>
  </z-paging-swiper>
</template>

<style lang="scss">
page {
  background-color: #f6f6f6;
}
.swiper {
  height: 100%;
}
</style>